<template>
	<view>
		<view class="tab-bar">
			<view :class="pageIndex == item.id?'tab-lines select-style':'tab-lines'" v-for="(item,index) in tabList" :key="index" @click="navPage(item)">
				<view v-if="item.id != 2">
					<image :src="pageIndex == item.id?item.selecticon:item.icon" mode=""></image>
					<view>{{item.tabname}}</view>
				</view>
				<view class="select-style paddingstyle" v-else>
					<view class="center-icon">
						<image :src="item.icon" mode=""></image>
						<view>{{item.tabname}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="end-box" :style="'padding-bottom: ' + bottomPadding + 'px'"></view>

	</view>
</template>

<script>
	export default {
		name:"tabbar",
		props:{
			pageIndex:{
				type: Number,
				default :0
			}
		},
		mounted() {
			
		},
		data() {
			return {
				tabList:[
					{"tabname":"首页","icon":"../../static/tabbar/home.png","selecticon":"../../static/tabbar/home-s.png",id:0,'url':"/pages/index/index"},
					{"tabname":"消息","icon":"../../static/tabbar/message.png","selecticon":"../../static/tabbar/message-s.png",id:1,'url':"/pages/message/message"},
					{"tabname":"订单","icon":"../../static/tabbar/order.png","selecticon":"../../static/tabbar/order-s.png",id:3,'url':"/pages/order/order"},
					{"tabname":"个人中心","icon":"../../static/tabbar/mine.png","selecticon":"../../static/tabbar/mine-s.png",id:4,'url':"/pages/mine/mine"},
				],
				bottomPadding:0
			};
		},
		mounted(){
			// this.getSafeArea()
		},
		methods:{
			/* 获取底部安全区域 */
			async getSafeArea() {
			  const res = await uni.getSystemInfo({});
			  // console.log(res.safeArea.bottom)
			  this.bottomPadding = res.screenHeight - res.safeArea.bottom;
			},
			navPage(item){
				if(item.id == 2){
					uni.navigateTo({
						url:item.url,
						animationType: 'none'
					})
				}else{
					uni.redirectTo({
						url:item.url,
						animationType: 'none',
					})
				}
				
			}
		}
	}
</script>

<style lang="scss">
	// .bottomBtnBox{
	//     padding: 20rpx 20rpx constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
	//     padding: 20rpx 20rpx env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
	// }
	
	.tab-bar{
		background-color: #fff;
		position: fixed;
		bottom: 0;
		padding: 20rpx 35rpx;
		padding-bottom:constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		left: 0;
		right: 0;
		display: flex;
		align-items: center;
		justify-content: space-around;
		min-height: 114rpx;
		box-sizing: border-box;
		background: #fff;
		background-size: 100% 100%;
		z-index: 100;
		.tab-lines{
			font-size: 20rpx;
			color: #656667;
			text-align: center;
			flex: 1;
			image{
				width: 44rpx;
				height: 44rpx;
			}
			.center-icon{
				background: url("../../static/tabbar/center-bg.png")no-repeat;
				background-size: 100% 100%;
				width: 120rpx;
				height: 120rpx;
				box-sizing: border-box;
				padding: 24rpx 0 0;
				margin-bottom: 60rpx;
				image{
					width: 44rpx;
					height: 44rpx;
				}
				view{
					font-size: 20rpx;
				}
				
			}
			
		}
	}
	.select-style{
		view{
			color: #EF5233;
		}
	}
	.paddingstyle{
		padding: 0 10rpx;
	}
	
</style>